<template>
    <div class="countDiv">
        <select v-model.number="op">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">加</button>
        <button @click="minus">减</button>
        <br>
        结果：{{ sum }}
        <br>
        放大10倍：{{ bigSum }}
    </div>
</template>

<script lang="ts">
export default {
    name: 'Count'
}
</script>

<script setup lang="ts">
import { ref, toRef } from 'vue'
import { useCountStore } from '@/store/CountStore'
import { storeToRefs } from 'pinia';

const countStore = useCountStore()
//不丢失响应式的解构 storeToRefs只关注store数据，不会对方法进行包裹,ToRefs会将所有数据impl
const { sum,bigSum } = storeToRefs(countStore)
let op = ref(1)
// console.log(bigSum.value);


function add() {
    //第一种修改数据
    // countStore.sum += op.value
    //第二种修改数据   一般用于对象数据修改
    // countStore.$patch({
    //     sum:countStore.sum += op.value
    // })
    //第三种修改添加action方法
    countStore.increase(op.value)
}

function minus() {
    countStore.sum -= op.value
}

</script>

<style lang="css">
.countDiv {
    margin: 20px;
    height: 200px;
    width: 200px;
    background-color: burlywood;
}

.countDiv button {
    width: 50px;
}
</style>